<template>
	<view>
		<view class="bg-linear-ger" style="height: 250px">
			<img class="pl-2 mt-5" src="static/logo.png" style="width: 287px;height: 68px;" />
		</view>
		<view class="bg-white rounded-top" style="position: relative; top: -100px">
			<view class="p-5 font text-FFC251 font-weight-bold-600">欢迎登录下游端</view>
			<view class="pl-2 pr-2 lineHight-3">
				<!-- <u-field v-model="form.username" label="账号" placeholder="请输入登录账号">
				</u-field>
				<u-field v-model="form.password" label="密码" placeholder="请输入密码">
				</u-field>
				<view class="position-absolute right-2 mt-2" style="z-index: 1">
					<image :src="imageBase64" @click="imgClick" mode="widthFix" style="width: 120px; height: 120px">
					</image>
				</view>
				<u-field v-model="form.captcha" label="验证码" placeholder="请输入验证码" class="captcha-input"></u-field> -->

				<view class="pl-3">
					<u-form :model="form" ref="uForm">
						<u-form-item required label="账号" label-width="180" prop="username">
							<u-input placeholder="请输入登录账号" v-model="form.username" />
						</u-form-item>
						<u-form-item required label="密码" label-width="180" prop="password">
							<u-input :password-icon="true" type="password" placeholder="请输入密码" v-model="form.password" />
						</u-form-item>
						<u-form-item required label="验证码" label-width="180" prop="captcha">
							<u-input class="mr-3 " placeholder="请输入验证码" v-model="form.captcha" input-align="left" />
							<view class="position-absolute right-2 mt-2" style="z-index: 1;">
								<image :src="imageBase64" @click="imgClick" mode="widthFix"
									style="width: 120px; height: 120px;">
								</image>
							</view>
						</u-form-item>
					</u-form>
				</view>

				<view class="u-inline-block dfes">
					<u-checkbox v-model="agreementChecked" :label="true">我已阅读并同意</u-checkbox>
					<view class="text-primary" @click="open('login/serviceAgreement')">《服务协议》</view>
					<view class="text-primary" @click="open('login/serviceAgreement')">《隐私政策》</view>
				</view>
			</view>

			<view class="pl-3 pr-3">
				<u-button shape="circle" @click="verifyCaptchaClick" type="success">登录</u-button>
			</view>

			<!-- <view class="text-right pr-5 mt-6" @click="open('touristMode/index/index')">
				<u-icon name="google" color="#08C060" size="28"></u-icon>游客登录
			</view> -->
			<view class="text-center mt-3">
				<view class="font-13 text-999999 mt-2">其他登录方式</view>
				<view class=" m-2" @click="open('login/phoneLogo')">
					<i class="p-1 iconfont icon-mima font-28 main-text-color border-s"></i>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js'
	import $U from '@/common/free-lib/util.js'
	export default {
		data() {
			return {
				agreementChecked: true,
				form: {
					captcha: '',
					checkKey: '',
					password: '',
					username: '',
				},
				imageBase64: '',
				checkKey: '',
				rules: {
					username: [{
						required: true,
						message: '登录账号不能为空',
						trigger: ['change', 'blur'],
					}],
					password: [{
							required: true,
							message: '密码不能为空',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								const reg = /^(?=.*[a-zA-Z])(?=.*\d|.*[\W_])[A-Za-z\d\W_]{6,}$/;
								if (!reg.test(value)) {
									 callback(new Error('密码必须包含英文、数字、特殊字符中的至少二种，且长度不少于6位'));
								} else {
									callback();
								}
							},
							trigger: ['change', 'blur'],
						}
					],

					captcha: [{
						required: true,
						message: '验证码不能为空',
						trigger: ['change', 'blur'],
					}, ]
				},
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			// 假设 result 是一个包含 code 属性的对象
			const result = {
				code: 401
			}; // 这里假设为了示例设定为 401，实际使用时根据情况设定
			
			// 示例判断 result.code
			if (result.code === 401) {
				uni.navigateTo({
					url: '/pages/login/login' // 跳转到登录页面的路径
				});
			} else {
				// 判断缓存
				if (uni.getStorageSync("token")) {
					uni.switchTab({
						url: '/pages/tabbar/index/index'
					});
				}
			}
			this.VerificationCode()
		},
		methods: {

			imgClick() {
				this.VerificationCode()
			},

			VerificationCode() {
				$H.get(
						'/brand/user/down/randomImage', {}, {
							token: false,
						}
					)
					.then((res) => {
						if (res && res.result && res.result.image) {
							this.imageBase64 = res.result.image
							this.checkKey = res.result.checkKey
						} else {
							console.error('响应格式不正确或未找到图片数据')
						}
					})
					.catch((error) => {
						console.error('请求出错', error) // 处理任何错误
					})
			},

			// verifyCaptchaClick() {
			// 	if (!this.agreementChecked) {
			// 		uni.showToast({
			// 			title: '请同意协议',
			// 			icon: 'none',
			// 		})
			// 		return
			// 	}
			// 	if (this.form.captcha) {
			// 		let o = {
			// 			username: this.form.username,
			// 			password: this.form.password,
			// 			checkKey: this.checkKey,
			// 			captcha: this.form.captcha,
			// 		}
			// 		$H.post('/brand/user/down/login', o, {
			// 				token: false,
			// 			})
			// 			.then((res) => {
			// 				if (!res.success) {
			// 					uni.showToast({
			// 						title: res.message || '登录失败',
			// 						icon: 'error'
			// 					});
			// 					return;
			// 				}
			// 				uni.showToast({
			// 					title: '登录成功！',
			// 					icon: 'success'
			// 				});
			// 				$U.setStorage('token', res.result.token)
			// 				$U.setStorage('userInfo', res.result)
			// 				uni.switchTab({
			// 					url: '/pages/tabbar/index/index'
			// 				});
			// 			})
			// 			.catch((error) => {
			// 				console.error('请求出错', error) // 处理任何错误
			// 				uni.showToast({
			// 					title: '登录失败',
			// 					icon: 'none',
			// 				})
			// 			})
			// 	} else {
			// 		uni.showToast({
			// 			title: '验证码错误',
			// 			icon: 'none',
			// 		})
			// 	}
			// },
			verifyCaptchaClick() {
				if (!this.agreementChecked) {
					uni.showToast({
						title: '请阅读并同意《服务协议》《隐私政策》',
						icon: 'none'
					});
					return;
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.form.captcha) {
							let o = {
								username: this.form.username,
								password: this.form.password,
								checkKey: this.checkKey,
								captcha: this.form.captcha
							}
							$H.post('/brand/user/down/login', o, {
									token: false
								})
								.then(res => {
									let userInfo = res.result || {};
									if (!res.success) {
										uni.showToast({
											title: res.message || '登录失败',
											icon: 'error'
										});
										return;
									}
									uni.setStorageSync("token", res.result.token)
									uni.setStorageSync("userInfo", userInfo);
									uni.switchTab({
										url: '/pages/tabbar/index/index'
									})
								})
								.catch(error => {
									console.error('请求出错', error);
									uni.showToast({
										title: error.message,
										icon: 'none'
									});
								});
						} else {
							uni.showToast({
								title: '验证码错误',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: "请完整填写表单",
							icon: 'none'
						});
					}
				})

			},


			open(path) {
				uni.navigateTo({
					url: '/pages/' + path
				})
			},
		},
	}
</script>

<style scoped>
	canvas {
		border: 1px solid #cccccc;
	}

	input,
	button {
		margin-top: 10px;
	}

	.u-border-bottom:after {
		border-bottom: 1px solid #ffc251 !important;
	}
</style>